<?xml version="1.0" encoding="utf-8" ?>
<xsl:stylesheet
    version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:soap="http://www.w3.org/2003/05/soap-envelope"
    xmlns:dssp="http://schemas.microsoft.com/xw/2004/10/dssp.html"
    xmlns:sd21="http://www.robot-electronics.co.uk/2006/10/sd21hardware.html"
    >

  <xsl:import href="/resources/dss/Microsoft.Dss.Runtime.Home.MasterPage.xslt" />

  <xsl:template match="/">
    <xsl:comment>
      <!-- Service Header Info -->
    </xsl:comment>
    <xsl:variable name="title">
      SD21 Hardware Service
    </xsl:variable>
    <xsl:variable name="serviceName">
      SD21 Hardware Service
    </xsl:variable>
    <xsl:variable name="description">
      The SD21 is a 21 channel servo controller module. It will drive up to 21 RC servo's and maintain a 20mS refresh rate, regardless of the number of servo's used or their positions (pulse widths).
    </xsl:variable>

    <xsl:call-template name="MasterPage">
      <xsl:with-param name="serviceName" select="$serviceName" />
      <xsl:with-param name="description" select="$description" />
      <!-- If title is not provided, serviceName will be used instead. -->
      <xsl:with-param name="title">
        <xsl:value-of select="$serviceName" />
        <xsl:if test="$title != ''">
          <xsl:text> - </xsl:text>
          <xsl:value-of select="$title" />
        </xsl:if>
      </xsl:with-param>
      <!-- Possible values for navigation are: 'Open', 'Closed', and 'None'
           'Open' is the default value. -->
      <xsl:with-param name="navigation" select="'Open'" />
      <!-- The contents of head param will be placed just before the </head> tag in html. -->
      <xsl:with-param name="head">
        <link rel="stylesheet" type="text/css" href="/resources/I2CHardware/Devantech.Services.I2C.Hardware.resources.DevantechI2CHardware.Stylesheet.css" />

        <style type="text/css">
          /* Service-specific stylesheet goes here */
          .Servo { font-size: 12px; }
          
          .Min { position:relative; display:inline-block; cursor: move;
            width:42px;
            height: 17px;
            line-height: 17px;
            font-size: 11px;
            text-align: center;
            border-right: 1px solid black;
          }
          .Position {  position:relative; display:inline-block; cursor: move;
            width:30px;
            height: 17px;
            line-height: 17px;
            font-size: 11px;
            text-align: center;
          }
          .Max {  position:relative; display:inline-block; cursor: move;
            width:42px;
            height: 17px;
            line-height: 17px;
            font-size: 11px;
            text-align: center;
            border-left: 1px solid black;}
          .Other { position:absolute; display:inline-block; left: 480px; }
      
        </style>

        <script language="javascript" type="text/javascript" src="/resources/SD21Hardware/Devantech.Services.SD21.Hardware.resources.DevantechSD21Hardware.Javascript.js"/>
        <script language="javascript" type="text/javascript">
        <![CDATA[<!--
          /* Service-specific script goes here */

          dssRuntime.init = function()
          {
            // Add page initialization code here.
            // This function is attached to the window.onload event.
            // Do not override window.onload.
            
            attachEvents();
          }
        //-->     ]]>
        </script>
      </xsl:with-param>
    </xsl:call-template>
  </xsl:template>

  <!-- Match service state's document element. -->

	<xsl:template match="/sd21:SD21HardwareState">
		<form name="ServoChangeForm" method="POST">
			<input type="hidden" name="key" id="key"></input>
			<input type="hidden" name="value" id="value"></input>
		</form>
					
				<span class="SubTitle">
					Module found at address <xsl:value-of select="sd21:I2CAddress"/>
				</span>
				<br/>
				<span class="SmallText">Last Contact: <xsl:value-of select="sd21:Timestamp"/></span>
				<br/>
				<br/>
				<span class="key">
					Battery Volts: 
				</span>
				<span class="value">
					<xsl:value-of select="sd21:BatteryVolts"/>
				</span>
				<br/>
				<span class="key">
					Software Revision: 
				</span>
				<span class="value">
					<xsl:value-of select="sd21:SoftwareRevision"/>
				</span>
				<br/>
				<br/>
					<xsl:for-each select="sd21:Servos/*">
						<div class="Servo">
							<xsl:attribute name="id">Servo-<xsl:value-of select="position()-1"/></xsl:attribute>
							<span style="width:60px; display: inline-block;">
								Servo <xsl:value-of select="position()-1"/>
							</span>
							<span class="Min">
								<xsl:attribute name="id">Min-<xsl:value-of select="position()-1"/></xsl:attribute>
								<xsl:attribute name="style">left:<xsl:value-of select="(sd21:Min div 5) -150" />px</xsl:attribute>
								<xsl:value-of select="sd21:Min"/>
							</span>
							<span class="Position">
								<xsl:attribute name="id">Position-<xsl:value-of select="position()-1"/></xsl:attribute>
								<xsl:attribute name="style">left:<xsl:value-of select="(sd21:Position div 5) -150" />px</xsl:attribute>
								<xsl:value-of select="sd21:Position"/>
							</span>
							<span class="Max">
								<xsl:attribute name="id">Max-<xsl:value-of select="position()-1"/></xsl:attribute>
								<xsl:attribute name="style">left:<xsl:value-of select="(sd21:Max div 5) -150" />px;</xsl:attribute>
								<xsl:value-of select="sd21:Max"/>
							</span>
							<span class="Other">Home: 
								<input class="Editable" maxlength="4"
									onfocus="this.className='EditableActive'" 
									type="text" >
									<xsl:attribute name="onblur">sendAsForm('Home-<xsl:value-of select="position()-1"/>',this.value);</xsl:attribute>
									<xsl:attribute name="value">
										<xsl:value-of select="sd21:Home" />
									</xsl:attribute>
								</input>
							
								Speed:
								<input class="Editable" maxlength="4"
									onfocus="this.className='EditableActive'" 
									type="text" >
									<xsl:attribute name="onblur">sendAsForm('Speed-<xsl:value-of select="position()-1"/>',this.value);</xsl:attribute>
									<xsl:attribute name="value">
										<xsl:value-of select="sd21:Speed" />
									</xsl:attribute>
								</input>
						</span>
						</div>
					</xsl:for-each>
					<br clear="all" />
					<div class="hr"></div>
				<div class="RightColumn">
					<a class="LinkSmall" 
							href="http://www.robot-electronics.co.uk/htm/sd21tech.htm" 
							target="_new">View Devantech Documentation</a>
				</div>
					<span class="SmallText">Config at: /store/Devantech.Services.SD21.Hardware.xml</span>

		</xsl:template>
	</xsl:stylesheet>
	